<template>
	<view class="container">
		<view class="container-column">
			<st-waterfall-flow-item v-for="item in leftList" :key="item.id" :dataItem="item" v-if="leftList.length" @loadHeight="loadHeight"></st-waterfall-flow-item>
		</view>
		<view class="container-column">
			<st-waterfall-flow-item v-for="item in rightList" :key="item.id" :dataItem="item" v-if="rightList.length" @loadHeight="loadHeight"></st-waterfall-flow-item>
		</view>
	</view>
</template>

<script>
	import stWaterfallFlowItem from './st-waterfall-flow-item'
	export default {
		components: {
			stWaterfallFlowItem
		},
		name:"st-waterfall-flow",
		props: {
			list: {
				type: Array,
				default(){
					return []
				}
			}
		},
		watch: {
			list: {
				handler(){
					this.render()
				},
				immediate: true
			}
		},
		data() {
			return {
				leftHeight: 0,
				leftList: [],
				rightHeight: 0,
				rightList: [],
				count: 0
			};
		},
		methods: {
			render(){
				const item = this.list[this.count]
				if(!item) return
				if(this.leftHeight > this.rightHeight){
					this.rightList.push(item)
				}else{
					this.leftList.push(item)
				}
				this.count++
			},
			loadHeight(e){
				const {height, id} = e
				if(this.leftHeight > this.rightHeight){
					this.rightHeight += height
				}else{
					this.leftHeight += height
				}
				this.render()
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	padding: 10rpx 12rpx;
	box-sizing: border-box;
}
.container-column{
	flex: 0 0 50%
}
</style>